<template>
  <div class="pagebody">
    <HomeHeadeh />
    <div class="head">
      <div class="container">
        <div class="title_list">
          <nuxt-link target="_blank" :to="'/drugList/' + item.id + '/1.html'" :class="currentSubjectId == item.id ? 'title_card title_card2' : 'title_card'"
            v-for="(item, index) in diseaseList" :key="index">
            {{ item.nameEn }}
          </nuxt-link>
        </div>
      </div>
    </div>
    <div class="prelude">
      <div class="container">
        <div class="disease_list" v-show="bean.id == currentSubjectId" v-for="(bean, index) in diseaseList" :key="index">
          <nuxt-link target="_blank" :to="'/drugList/' + item.id + '/1.html'" :class="currentDiseaseId == item.id ? 'disease_card disease_card2' : 'disease_card'"
            v-for="(item, index) in bean.diseaselist" :key="index">{{ item.nameEn }}
          </nuxt-link>
        </div>
        <img src="@/static/images/public/any_questions.png" class="any_questions">
      </div>
    </div>
    <div class="container">
      <div class="drug_list">
        <nuxt-link target="_blank" :to="'/drugDetail/' + item.id + '.html'" class="drug_card" v-for="(item, index) in drugList" :key="index">
          <img src="@/static/images/drug/drug_test.png" class="drug_img">
          <div class="drug_detail">
            <div class="drug_name">{{ item.nameEn }}</div>
            <div class="druginfo">Manufacturer: {{ item.manufacturer }} </div>
            <div class="druginfo">Specification: {{ item.specifications }}</div>
            <div class="original_price">${{ item.originalPrice }}</div>
            <div class="current_price">${{ item.price }}</div>
          </div>
        </nuxt-link>
      </div>
    </div>
    <div class="top10">
      <div class="container">
        <div class="top_head">
          TOP 10 USER FOLLOW
        </div>
        <div class="drug_list">
          <nuxt-link target="_blank" :to="'/drugDetail/' + item.id + '.html'" class="drug_card" v-for="(item, index) in drugTop" :key="index">
            <img src="@/static/images/drug/drug_test.png" class="drug_img">
            <div class="drug_name">{{ item.nameEn }}</div>
            <div class="drug_name drug_content">Manufacturer: {{ item.manufacturer }}</div>
            <div :class="index == 0 ? 'ranking' : (index == 1 ? 'ranking ranking2' : 'ranking ranking3')"
              v-if="index < 3">TOP <br> {{ index + 1 }}</div>
          </nuxt-link>
        </div>
      </div>
    </div>
    <div class="latest_articles">
      <div class="container">
        <div class="tophead">Latest Articles</div>
        <div class="news_list">
          <nuxt-link target="_blank" :to="'/drugnews/' + item.id + '.html'" class="news_card" v-for="(item, index) in newsList" :key="index">
            <div class="news_title">{{ item.name }}</div>
            <div class="news_title news_content" v-html="item.content"></div>
            <div class="news_info">
              <div class="news_from">Article Source: {{ item.authorSource }} &emsp; Page views: {{ item.hits }} </div>
              <div class="news_from">{{ item.updateTime }}</div>
            </div>
          </nuxt-link>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import { getDruglist,selectNewsList,getDiseaseData,getDiseaseById } from '@/api/api'
export default {
  data () {
    return {
      // currentSubjectId: 2,
      // currentDiseaseId: 1,
    }
  },
  async asyncData ({ app, isDev, route, store, env, params, query, req, res, redirect, error }) {
    // 获取所有疾病treeData
    let diseaseList = await app.$axios.post(getDiseaseData,{})
    diseaseList.data = diseaseList.data.splice(0,3)

    // 获取当前疾病或科目ID
    let diseaseId = params.diseaseId
    // 获取当前疾病信息
    let diseaseInfo = await app.$axios.get(getDiseaseById + diseaseId)
    let currentSubjectId = 0;
    let currentDiseaseId = 0;
    if(null != diseaseInfo && null != diseaseInfo.data){
      if(diseaseInfo.data.pid == 0){
        currentSubjectId = diseaseInfo.data.id
      }else{
        currentSubjectId = diseaseInfo.data.pid
        currentDiseaseId = diseaseInfo.data.id
      }
    }

    // 获取当前疾病下药品列表
    let drugListData = {
      "pageNum":"1",
      "pageSize":"15",
      "state":"1",
      "orderByColumn":"updateTime",
      "isAsc":"DESC",
      "diseaseNew":{"id":currentDiseaseId,"pid":currentSubjectId}
    }
    let drugList = await app.$axios.post(getDruglist , drugListData)

    // 获取TOP 10 USER FOLLOW 药品列表
    let drugData = {
      "pageNum":"1",
      "pageSize":"10",
      "state":"1",
      "orderByColumn":"drug.updateTime",
      "isAsc":"DESC"
    }

    let drugTop = await app.$axios.post(getDruglist , drugData)

    // 获取最新文章
    let newData = {
      "pageNum":"1",
      "pageSize":"12",
      "state":"1",
      "orderByColumn":"updateTime",
      "isAsc":"DESC"
    }
    let newsList = await app.$axios.post(selectNewsList , newData)

    return{
      diseaseList:diseaseList.data,
      drugTop:drugTop.rows,
      drugList:drugList.rows,
      newsList:newsList.rows,
      currentSubjectId:currentSubjectId,
      currentDiseaseId:currentDiseaseId
    }
  }
}
</script>

<style lang="scss" scoped>
.pagebody {
  background-color: #FFF;

  .head {
    height: 72px;
    background: rgba(255, 255, 255, 0.5);
    margin-top: -72px;

    .title_list {
      display: flex;
      justify-content: flex-start;

      .title_card {
        font-weight: 400;
        font-size: 20px;
        color: #2E343E;
        line-height: 72px;
        margin-right: 48px;
        cursor: pointer;
      }

      .title_card2 {
        color: #0041A3;
        // font-weight: bold;
        border-bottom: 6px solid #0041A3;
      }
    }
  }

  .prelude {
    background: linear-gradient(180deg, rgba(229, 245, 255, 0.8) 0%, rgba(229, 245, 255, 0) 100%);

    .disease_list {
      padding-top: 40px;
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;

      .disease_card {
        background: #FFFFFF;
        border-radius: 24px;
        padding: 0 24px;
        font-weight: 400;
        font-size: 20px;
        color: #2E343E;
        line-height: 52px;
        margin-bottom: 21px;
        margin-left: 20px;
        outline:none;
        cursor: pointer;
      }

      .disease_card2 {
        background: #0078FF;
        color: #FFFFFF;
      }
    }

    .any_questions {
      height: 148px;
      margin: 39px 0 48px 0;
      cursor: pointer;
    }
  }

  .drug_list {
    display: flex;
    justify-content: flex-start;
    flex-wrap: wrap;

    .drug_card {
      margin-bottom: 16px;
      margin-left: 8px;
      cursor: pointer;

      .drug_img {
        width: 232px;
        height: 232px;
      }

      .drug_detail {
        padding: 0 0 20px 16px;

        .drug_name {
          font-weight: bold;
          font-size: 16px;
          color: #2E343E;
          line-height: 14px;
          margin-bottom: 8px;
        }

        .druginfo {
          font-weight: 400;
          font-size: 14px;
          color: #616469;
          line-height: 24px;
          width: 210px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .original_price {
          margin-top: 8px;
          font-weight: 400;
          font-size: 14px;
          color: #8A95A2;
          line-height: 14px;
          text-decoration-line: line-through;
        }

        .current_price {
          font-weight: bold;
          font-size: 24px;
          color: #0041A3;
          line-height: 24px;
        }
      }
    }
  }

  .top10 {
    background: #F5F8FD;

    .top_head {
      width: 120px;
      margin-top: 56px;
      line-height: 74px;
      font-weight: 900;
      font-size: 32px;
      color: #2E343E;
      border-bottom: 6px solid #0041A3;
      white-space: nowrap;
    }

    .drug_list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin: 40px 0 0 -10px;
      padding-bottom: 50px;

      .drug_card {
        margin-left: 10px;
        background: #FFFFFF;
        border-radius: 24px;
        padding-bottom: 24px;
        width: 232px;
        position: relative;
        cursor: pointer;

        .drug_img {
          width: 232px;
          height: 232px;
          border-radius: 24px 24px 0 0;
        }

        .drug_name {
          font-weight: bold;
          font-size: 18px;
          color: #2E343E;
          margin: 8px 0 0 16px;
          width: 200px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .drug_content {
          color: #616469;
          font-weight: 400;
        }

        .ranking {
          position: absolute;
          top: 0;
          right: 23px;
          width: 40px;
          height: 56px;
          padding-top: 10px;
          box-sizing: border-box;
          background: linear-gradient(357deg, #FC1C12 0%, #FD6F23 100%);
          border-radius: 0px 0px 24px 24px;
          text-align: center;
          align-items: center;
          z-index: 999;
          font-weight: bold;
          font-size: 12px;
          color: #FFFFFF;
        }

        .ranking2 {
          background: linear-gradient(357deg, #FC4A14 0%, #FF9F1B 100%);
        }

        .ranking3 {
          background: linear-gradient(357deg, #FB7511 0%, #FEA218 100%);
        }
      }
    }
  }

  .latest_articles {
    margin-top: 77px;

    .tophead {
      width: 120px;
      line-height: 74px;
      font-weight: 900;
      font-size: 32px;
      color: #2E343E;
      border-bottom: 6px solid #0041A3;
      white-space: nowrap;
    }

    .news_list {
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      margin: 16px 0 0 -32px;

      .news_card {
        margin: 24px 0 0 32px;
        width: 584px;
        border-bottom: 1px solid rgba(203, 209, 215, 0.4);
        cursor: pointer;

        .news_title {
          font-weight: bold;
          font-size: 18px;
          color: #2E343E;
          line-height: 28px;
          overflow: hidden;
          text-overflow: ellipsis;
          display: -webkit-box;
          -webkit-box-orient: vertical;
          -webkit-line-clamp: 1;
        }

        .news_content {
          font-weight: 400;
          color: #616469;
          margin-top: 8px;
          -webkit-line-clamp: 2;
        }

        .news_info {
          display: flex;
          justify-content: space-between;

          .news_from {
            font-weight: 400;
            font-size: 12px;
            color: #8A95A2;
            line-height: 12px;
            margin: 14px 0 22px 0;
          }
        }
      }
    }
  }
}
</style>